<template>
	<div class="main">
		<div class="icon-item" v-for="item in lists" :key="item.id">
			<div class="img">
				<img :src="require('@/'+item.src)" >
			</div>
			<label>{{item.name}}</label>
		</div>
	</div>
</template>

<script>
	export default {
		name:'Icons',
		data(){
			return {
				lists:[
					{id:1, name:"国内游",src:'assets/icon/icon01.png'},
					{id:2, name:"住宿",src:'assets/icon/icon02.png'},
					{id:3, name:"境外游",src:'assets/icon/icon03.png'},
					{id:4, name:"海岛度假",src:'assets/icon/icon04.png'},
					{id:5, name:"境外游",src:'assets/icon/icon05.png'},
					{id:6, name:"出行方式",src:'assets/icon/icon06.png'},
					{id:7, name:"周边游",src:'assets/icon/icon07.png'},
					{id:8, name:"户外游",src:'assets/icon/icon08.png'}
				]
			}
		}
	}
</script>

<style scoped>
	.main{
		width: 95%;
		padding: 0 2.5%;
		margin: 0.5rem auto 0;
		overflow: hidden;
	}
	.icon-item{
		float: left;
		width: 13%;
		margin: 1.5% 6%;
		flex-direction: column;
		text-align: center;
	}
	.icon-item img{
		width: 100%;
	}
	.icon-item label{
		line-height: 0.5rem;
	}
</style>
